
       * {
        padding: 0;
        margin: 0;
    }
    .banner {
        width: 1000px;
        height: 600px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    ul, li {
        list-style: none;
    }
    .pic {
        height: 600px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .pic li {
        float: left;
    }
    .pic li img {
        width: 1000px; 
        
        height: 600px;
        /* width: calc(100% / 8); */
    }
    .dot {
        width: 100%;
        text-align: center;
        font-size: 0;
        position: absolute;
        bottom: 40px;
        left: 0;
    }
    .dot li {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 5px;
        cursor: pointer;
    }
    .banner button {
        width: 30px;
        height: 50px;
        background-color: rgba(0, 0, 0, .5);
        border: 0 none;
        color: #fff;
        opacity: .5;
        position: absolute;
        top: 45%;
        cursor: pointer;
        font-size: 24px;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;

    }